﻿@{
    ViewBag.Title = "Index";
}

<h2>Cart</h2>


<style>
    .Clear
    {
        clear: both;
    }
</style>



@if (ViewBag.cart.Songs.Count == 0 && ViewBag.cart.Albums.Count == 0)
{
    <div style="color: red">
        @Html.Raw("Cart is empty!")
    </div>
}

@if (ViewBag.cart.Albums.Count != 0)
{
    <b>@Html.Raw("Albums:") </b><br /><br />
    
    <div style="margin: 0; background-color: lightgrey; height: 25px">
        <div style="float: left; width: 50%">
            <b>Title</b>
        </div>
        <div style="float: left; width: 30%">
            <b>Release Date</b>
        </div>
        <div style="float: left; width: 10%">
            <b>Price</b>
        </div>
    </div>
    
    for (int i = 0; i < ViewBag.cart.Albums.Count; i++)
    {
        <div class="Clear"; style="margin: 0 auto">
            <div style="float: left; width: 50%">
                @Html.Raw(ViewBag.cart.Albums[i].Title)
            </div>
            <div style="float: left; width: 30%">
                @Html.Raw(ViewBag.cart.Albums[i].ReleaseDate)
            </div>
            <div style="float: left; width: 10%">
                @Html.Raw(ViewBag.cart.Albums[i].Price)
            </div>
        </div>

        <div style="float: left; width: 5%">
            <img src="../Content/Image/cross.jpg" height="15" width="15" onclick="RemoveItemFromCart(@ViewBag.typeAlbum, @ViewBag.cart.Albums[i].ID)">
        </div>

    }
}
    
    
    
  
   
<br /><hr width ="900" />
    
@if(ViewBag.cart.Songs.Count != 0)
{
       <b> @Html.Raw("Songs:") </b><br /><br />

    <div style="margin: 0; background-color: lightgrey; height: 25px">
        <div style="float: left; width: 30%">
            <b>Title</b>
        </div>
        <div style="float: left; width: 20%">
            <b>Release Date</b>
        </div>
        <div style="float: left; width: 30%">
            <b>Artist</b>
        </div>
        <div style="float: left; width: 10%">
            <b>Price</b>
        </div>
    </div>

    for (int i = 0; i < ViewBag.cart.Songs.Count; i++)
    {
        string artist = "";
        <div class="Clear"; style="margin: 0 auto">
            <div style="float: left; width: 30%">
                @Html.Raw(ViewBag.cart.Songs[i].Title)
            </div>
            <div style="float: left; width: 20%">
                @Html.Raw((ViewBag.cart.Songs[i].ReleaseDate).Date.ToString("d"))
            </div>
                <div style="float: left; width: 30%">
                    @for (int k = 0 ; k < ViewBag.cart.Songs[i].Artists.Count ; k++)
                    {
                        if (k == 0)
                        {
                            artist = ViewBag.cart.Songs[i].Artists[k].Name;
                        }
                        else
                        {
                            artist = artist + " & " + ViewBag.cart.Songs[i].Artists[k].Name;
                        }
                    }
                    @Html.Raw(artist)
                </div>
            </div>
            <div style="float: left; width: 10%">
                @Html.Raw(ViewBag.cart.Songs[i].Price)
            </div>

        <div style="float: left; width: 5%">
            <img src="../Content/Image/cross.jpg" height="15" width="15" onclick="RemoveItemFromCart(@ViewBag.typeSong, @ViewBag.cart.Songs[i].ID)">
        </div>
    }
}
    
   
           
    
<br />
<br />
<br />
<br />
<b>____________</b><br />
<b>Total: $@ViewBag.cart.TotalCost</b>
    
<br />
<br />
<br />
<br />
@if(ViewBag.cart.Songs.Count != 0 || ViewBag.cart.Albums.Count != 0)
{
    <form action="/Transaction/CreateTransaction" method="post">
        <input type="submit" name="submit" id="CheckOut" value="Check out" />
    </form>
}

  


  
<script>
    var getType;
    var getID;

    // remove item from cart
    function RemoveItemFromCart(type, ID) {
        var r = confirm("Confirm removal of item from cart?");
        if (r == true) {
            getType = type
            getID = ID;
            RemoveItemFromCartPost();
        }
    }
    function RemoveItemFromCartPost() {
        XMLhttpRemoveItem = new XMLHttpRequest();

        XMLhttpRemoveItem.open("POST", "/Transaction/RemoveFromCart", true);
        XMLhttpRemoveItem.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpRemoveItem.onreadystatechange = reqReadyRemoveItemFromCart;
        sendStrRemoveItem = "type=" + getType + "&productID=" + getID;
        XMLhttpRemoveItem.send(sendStrRemoveItem);
    }
    function reqReadyRemoveItemFromCart() {
        if (XMLhttpRemoveItem.readyState == 4 && XMLhttpRemoveItem.status == 200) {
            if (XMLhttpRemoveItem.responseText == "True") {
                document.getElementById("refresh").click();
            }
            else {
                alert("Error occured.");
            }

        } else if (XMLhttpRemoveItem.readyState == 4) {
            alert("error! code: " + XMLhttpRemoveItem.status);

        }
    }
</script>


<form action="/Transaction/Index" method="post">
        <input type="submit" name="submit" id="refresh" hidden="hidden"/>
</form>